//ready
$(function (){
    //清除元素
    $("#Cnmv").empty()
    $("#Memv").empty()
    $("#Oemv").empty()
    $("#Wwmv").empty()
    $.ajax({
        type: "GET",
        url: "./get/",
        data: {},
        dataType: "JSON",
        success: function(result) {
            outmsg(result)
        }
    });
})

//收到数据后渲染页面
function outmsg(jsonmsg){
    //每个页面循环次添加
    for(i =0;i<4;i++) //每个页面循环
    {
        for(j=0;j<10;j++)  //每行十条数据
        {
            id = ""
            dic = ""
            //每条数据需要做的事情
            //判断要往哪个中添加元素
            if(i === 0)
            {
                id = "#Cnmv"
                dic = jsonmsg['pag1']
            }
            else if(i === 1)
            {
                id = "#Memv"
                dic = jsonmsg['pag2']
            }
            else if(i === 2)
            {
                id = "#Oemv"
                dic = jsonmsg['pag3']
            }
            else if(i === 3)
            {
                id = "#Wwmv"
                dic = jsonmsg['pag4']
            }
            dic_now = dic[j+1]
            //console.log(dic_now['rank'])
            //开始添加数据
            Text = "<div id = \"cardid\" class=\"card\" onclick=\"topclick(this)\" style=\"width: 100%;margin-top: 1%;\"></div>"
            $(id).append(Text)
            Text2 = "<div id=\"thisrow\" class=\"row\"></div>"
            $("#cardid").append(Text2)
            $("#cardid").removeAttr("id")   //删除上一个属性，以免重复添加
            //第一列
            Text3 = "<div class=\"col-1\"><span class=\"topline\">"+dic_now['rank']+".</span></div>"  //排行列
            //第二列 电影图片
            Text4 = "<img class=\"card-img-top\" src=\""+dic_now['imagsrc']+"\" alt=\"Card image cap\" style=\"width: 5%;height: 5%;\">"
            //第三列 电影名，主演，上映时间
            Text5 = "<div class=\"col-9 m-auto\">\n" +
                "                        <div class=\"topname\" style=\"text-align: left;margin: 1%\">"+dic_now['name']+"</div>\n" +
                "                        <div style=\"text-align: left;margin-left: 1%\"><span>主演:"+dic_now['mainact']+"</span></div>\n" +
                "                        <div style=\"text-align: left;margin-left: 1%\"><span style=\"opacity: 0.8\">上映时间:"+dic_now['time']+"</span></div>\n" +
                "                    </div>"
            //第四列 评分
            Text6 = "<div class=\"col-1 m-auto\" style=\"font-weight: bold;font-size: 2rem;font-style: italic;\">"+dic_now['score']+"</div>"
            $("#thisrow").append(Text3,Text4,Text5,Text6)
            $("#thisrow").removeAttr("id")
        }
    }
}

//点击跳转到影片详情页
function topclick(obj){
    //child = that.children('.topname')
    //movname = that.$("[name='movname']")
    all = $(obj).find(".col-9").text()
    all = all.replaceAll(" ","")
    index = all.indexOf("主")
    movtime = all.slice(-11,-1);
    movtime = movtime.replaceAll("-","")
    movname = all.slice(1,index);
    movact = "";


    url = window.location.href;
    url = url + movname+"/"+movtime+"/"
    window.location.href = url
}

//排行榜页切换函数
function tagchange(e){
    id = $(e).attr("id");
    if(id == "mvbtn1")
    {
        $("#Cnmv").show();
        $("#Memv").hide();
        $("#Oemv").hide();
        $("#Wwmv").hide();
    }
    else if(id == "mvbtn2")
    {
        $("#Cnmv").hide();
        $("#Memv").show();
        $("#Oemv").hide();
        $("#Wwmv").hide();
    }
    else if(id == "mvbtn3")
    {
        $("#Cnmv").hide();
        $("#Memv").hide();
        $("#Oemv").show();
        $("#Wwmv").hide();
    }
    else if(id == "mvbtn4")
    {
        $("#Cnmv").hide();
        $("#Memv").hide();
        $("#Oemv").hide();
        $("#Wwmv").show();
    }
}